<template>
  <div v-show="step === 1" v-loading="loading" class="crud-wrapper">
    <div class="table-wrapper">
      <div class="group">
        <div class="head-container">
          <el-input
            v-model="name"
            :placeholder="$t('equipment.groupingInput')"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            ref="ptree"
            :data="groupOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            default-expand-all
            @node-click="handleNodeClick"
          >
            <div slot-scope="{ node, data }" class="el-tree-node__label custom-tree-node custom-tree-item">
              {{ data.name }}
            </div>
          </el-tree>
        </div>
      </div>

      <div class="right-wrap">

        <div class="search">
          <!-- <el-form ref="form" :model="params"> -->
          <el-row :gutter="10">
            <el-col :span="6">
              <!-- <el-form-item prop="name"> -->
              <el-input v-model="params.name" size="small" :placeholder="$t('equipment.programNameInput')" />
              <!-- </el-form-item> -->
            </el-col>
            <el-col :span="12">
              <el-button size="small" type="primary" @click="handleSearch">搜索</el-button>
              <el-button size="small" @click="handleClear">清空</el-button>
              <el-tooltip class="item" effect="dark" :content="$t('elButton.refresh')" placement="top">
                <el-button size="small" circle icon="el-icon-refresh" @click="refresh(params, page)" />
              </el-tooltip>
            </el-col>
          </el-row>
          <!-- </el-form> -->
        </div>

        <el-table
          ref="table"
          :data="programList"
          :border="true"
          :stripe="true"
          height="635"
          @row-click="handleRowClick"
          @select="handleSelect"
          @select-all="handleSelectAll"
        >
          <el-table-column header-align="center" align="center" type="selection" />
          <el-table-column prop="name" :label="$t('equipment.programName')" header-align="center" align="center" :show-overflow-tooltip="true" />
          <el-table-column label="节目类型" align="center" prop="type">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.type == '0'">普通节目</el-tag>
              <el-tag v-if="scope.row.type == '1'" type="info">LED节目</el-tag>
              <el-tag v-if="scope.row.type == '2'" type="warning">自定义节目</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="groupName" :label="$t('equipment.sortTitle')" header-align="center" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="duration" label="时长(s)" header-align="center" align="center" />
        </el-table>

        <div class="pagination-wrapper">
          <el-pagination
            :current-page="page.current"
            :page-sizes="[15, 30, 50, 100, 300, 500, 1000]"
            :page-size="page.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { listProgram as programList } from '@/api/ips/program'
import { idxOf } from '@/utils/obj-util'
import { groupTree } from '@/api/ips/group'

export default {
  name: 'Step2',
  model: {
    prop: 'selectedPlayProgramList',
    event: 'vmu'
  },
  props: {
    selectedPlayProgramList: {
      type: Array,
      default: () => []
    },
    step: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      id: 0,
      // 分页配置
      page: {
        size: 15,
        current: 1,
        total: 0
      },
      params: {
        name: ''
      },
      programList: [],
      loading: false,
      // 过滤分组用
      name: '',
      groupOptions: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      groupId: null
    }
  },
  computed: {
    selectedList: {
      get() {
        return this.selectedPlayProgramList
      },
      set(val) {
        this.$emit('vmu', val)
      }
    }
  },
  watch: {
    // 根据名称筛选分组名称树
    name(val) {
      this.$refs.ptree.filter(val)
    },
    programList: {
      deep: true,
      immediate: true,
      handler: function(val) {
        if (val && val.length) {
          setTimeout(() => {
            for (let i = 0; i < val.length; i++) {
              for (let p = 0; p < this.selectedList.length; p++) {
                if (this.selectedList[p].id === val[i].id) {
                  this.$refs.table.toggleRowSelection(val[i])
                  break
                }
              }
            }
          }, 0)
        }
      }
    }
  },
  created() {
    this.getList()
    this.getGroupTree()
  },
  methods: {
    /** 查询分组名称下拉树结构 */
    getGroupTree() {
      groupTree({ groupId: 40 }).then(response => {
        this.groupOptions = response.data
      })
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.groupId = (data.id === 0 ? null : data.id)
      this.getList(this.params)
    },
    /** 取消选择表格的一行 */
    removeSelection(idx) {
      this.$refs.table.toggleRowSelection(this.selectedList[idx])
      this.selectedList.splice(idx, 1)
      this.getList()
    },
    /** 点击搜索按钮触发 */
    handleSearch() {
      this.getList()
    },
    /** 点击清空按钮触发 */
    handleClear() {
      this.params = {
        name: ''
      }
      this.getList()
    },
    /** 新增、编辑dialog关闭调用 */
    reset() {
      this.$refs.table.clearSelection()
    },
    /** 查询设备列表 */
    getList() {
      this.loading = true
      const params = Object.assign({
        isTemplate: 0
      }, this.page)
      if (this.groupId) {
        params.fullPathId = this.groupId
      }
      if (this.params && this.params.name) {
        params.name = this.params.name
      }
      programList(params)
        .then((res) => {
          this.programList = res.data
          this.page.total = res.total
          this.loading = false
        })
        .catch(() => {
        })
    },
    /** 点击刷新按钮触发 */
    refresh(params, page) {
      this.getList()
    },
    /** 点击表格行 */
    handleRowClick(row, column, event) {
      const idx = idxOf(this.selectedList, row, 'id')
      if (idx === -1) {
        this.selectedList.push(row)
      } else {
        this.selectedList.splice(idx, 1)
      }
      this.$refs.table.toggleRowSelection(row)
    },
    /** 选择表格行 */
    handleSelect(selection, row) {
      if (selection.indexOf(row) === -1) { // 是取消
        const idx = idxOf(this.selectedList, row, 'id')
        if (idx !== -1) {
          this.selectedList.splice(idx, 1)
        }
      } else { // 是新增
        const temp = {
          id: row.id,
          name: row.name,
          groupId: row.groupId,
          groupName: row.groupName,
          duration: row.duration,
          width: row.width,
          height: row.height,
          layout: row.layout
        }
        this.selectedList.push(temp)
      }
    },
    /** 全选 */
    handleSelectAll(selection) {
      console.log(selection)
      if (selection.length) {
        for (let i = 0; i < selection.length; i++) {
          const index = idxOf(this.selectedList, selection[i], 'id')
          if (index === -1) {
            const row = selection[i]
            const temp = {
              id: row.id,
              name: row.name,
              groupId: row.groupId,
              groupName: row.groupName,
              duration: row.duration,
              width: row.width,
              height: row.height,
              layout: row.layout
            }
            this.selectedList.push(temp)
          }
        }
      } else {
        for (let i = 0; i < this.programList.length; i++) {
          const index = idxOf(this.selectedList, this.programList[i], 'id')
          this.selectedList.splice(index, 1)
        }
      }
    },
    /** 每页显示条数发生改变 */
    handleSizeChange(val) {
      this.page.size = val
      this.refresh(this.params, this.page)
    },
    /** 换页触发 */
    handleCurrentChange(val) {
      this.page.current = val
      this.refresh(this.params, this.page)
    }
  }
}
</script>

<style lang="scss" scoped>
  .btns-col {
    .el-button {
      margin-left: 8px;
      margin-top: 2px;
    }
  }

  .table-wrapper {
    margin: 0px 10px;
  }

  .table-wrapper {
    &:after {
      content: '';
      display: block;
      clear: both;
    }

    > .group {
      float: left;
      width: 200px;
    }

    > .right-wrap {
      float: left;
      width: calc(100% - 208px);
      margin-left: 8px;

      .pagination-wrapper {
        margin-top: 10px;
      }
    }
  }
</style>
